<template>
    <div>
        <div style="height:30px;margin-top:3px" v-if="!disabledForStop">
            <Button type="primary" @click="handleCreate()">录入
            </Button>
        </div>
        <Modal v-model="modalSs17004" :title="title" width="800" style="position:relative;" cancel-text="关闭">
            <Spin v-if="LoadingModal" size="large" fix></Spin>
            <Form ref="dataSs17004" :model="dataSs17004" :label-width="150" :rules="ruleSs17004"
                  :disabled="disableSubmit">
                <Row>
                    <FormItem label="支出所属" prop="ssbb0001">
                        <c-dict-select v-model="dataSs17004.ssbb0001" dictCode="expensestype"
                                       placeholder="请选择支出类别" :width="400"
                                       dicType="service"
                                       dictService="/api/ac/subsistence/ss17002Service/getAssistanceMemberList"
                                       :serviceParam="serviceParam" class="itemStyle"/>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="支出类别" prop="ssbb0003">
                        <c-dict-select v-model="dataSs17004.ssbb0003" dictCode="expensestype" :hiddenKeys="hiddenYBZP"
                                       :width="400"
                                       placeholder="请选择支出类别"/>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="月支出金额" prop="ssbb0004">
                        <InputNumber v-model="dataSs17004.ssbb0004" placeholder="请输入月支出金额" type="number"
                                     :min="0" :max="99999999"
                                     style="width: 400px"/>
                    </FormItem>

                </Row>
                <!--                            <FormItem label="支出时间范围" prop="daterange">-->
                <!--                                <DatePicker type="daterange" v-model="dataSs17004.daterange" class="itemStyle"-->
                <!--                                            style="width: 200px"/>-->
                <!--                            </FormItem>-->


            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="modalSs17004 = false">取消</Button>
                <template v-if="!disableSubmit">

                    <Button type="primary" size="large" @click="handleSubmit('dataSs17004')">确定</Button>
                </template>
            </div>
        </Modal>
        <div class="table_div">
            <vxe-table border
                       resizable
                       row-id="id"
                       :row-key="true"
                       show-overflow="tooltip"
                       highlight-hover-row
                       align="center"
                       header-align="center"
                       ref="xTree"
                       :loading="Loading"
                       :data="tableData">
                <vxe-table-column field="azcp0003" title="支出所属" align="center" min-width="200" fixed="left"/>
                <vxe-table-column field="ssbb0003_name" title="支出类别" align="center" min-width="160" fixed="left"/>
                <!--                <vxe-table-column field="ssbb0005" title="支出开始时间" align="center" min-width="140"-->
                <!--                                  :formatter="renderTime"/>-->
                <!--                <vxe-table-column field="ssbb0007" title="支出结束时间" align="center" min-width="140"-->
                <!--                                  :formatter="renderTime"/>-->
                <vxe-table-column field="ssbb0004" title="月支出金额" align="center" min-width="100"/>
                <vxe-table-column field="" title="操作" width="200" fixed="right">
                    <template v-slot="{ row }">
                        <Button type="info" size="small" style="margin-right: 5px" @click="handleEdit(row)"
                                :disabled="disabledForStop" v-if="!disabledForStop">编辑
                        </Button>
                        <Button type="error" size="small" style="margin-right: 5px" @click="handleDelete(row.id)"
                                :disabled="disabledForStop" v-if="!disabledForStop">删除
                        </Button>
                        <Button type="success" size="small" style="margin-right: 5px" @click="handleDetail(row)">详情
                        </Button>
                    </template>
                </vxe-table-column>
            </vxe-table>
            <Page :total="dataCount" :page-size="pageSize" show-total class="paging"
                  @on-change="handleTableChange" :current="pageNo"></Page>
        </div>
        <div style="height:40px;line-height:40px;margin-top:10px;text-align: center">
            <Button @click="prevStep">上一步</Button>
            <Button type="primary" @click="nextStep()" :loading="btnLoading" style="margin-left:20px">下一步</Button>
        </div>
    </div>
</template>
<script>
    import {CommonMixin} from '@/views/common/js/CommonMixin'
    import {postAction} from '@/api/request'
    import DateFormat from '@/plugins/format.js'

    export default {
        mixins: [CommonMixin],
        components: {},
        created() {
            let that = this;
            that.familyInfo = that.$parent.familyInfo;
            that.ss17001Id = that.familyInfo.ss17001Id;
            that.queryParam.azcp0500 = that.familyInfo.ss17001Id;
            this.loadData();
            that.serviceParam.azcp0500 = that.familyInfo.ss17001Id;
            //如是停救，operationType=300,则页面不可编辑
            if (that.$parent.familyInfo.ssca0016 == '300' || that.$parent.familyInfo.ssca0016 == '500' || that.$parent.familyInfo.ssca0016 == '501') {
                that.disabledForStop = true
            } else if (that.$parent.familyInfo.yjab0012 == '01' || that.$parent.familyInfo.yjab0012 == '02' || that.$parent.familyInfo.yjab0012 == '04') {
                //预警处置 已处置、维持现状、停救 不可编辑数据
                that.disabledForStop = true
            }
            if (this.$parent.familyInfo.ssca0002 === '102' || this.$parent.familyInfo.ssca0002 === '202') {
                this.hiddenYBZP = ''
            } else {
                this.hiddenYBZP = '10'
            }
        },
        data() {
            return {
                hiddenYBZP: '10',
                disabledForStop: false,
                LoadingModal: false,
                fieldsToValidate: ["ssbb0001", "ssbb0003", "ssbb0004"],
                serviceParam: {
                    azcp0500: ''
                },
                ruleSs17004: {
                    ssbb0001: [
                        {required: true, message: '请选择支出所属', trigger: 'blur'}
                    ],
                    ssbb0003: [
                        {required: true, message: '请选择支出类别', trigger: 'blur'}
                    ],
                    ssbb0004: [
                        {required: true, message: '请输入月支出金额', trigger: 'blur', type: 'number'}
                    ],
                    // daterange: [
                    //     {required: true, message: '请选择支出时间范围', trigger: 'blur', pattern: /.+/}
                    // ],
                },
                queryParam: {},
                btnLoading: false,
                disableSubmit: false,
                modalSs17004: false,
                familyInfo: {},
                title: "",
                tableData: [],
                dataCount: 0,
                Loading: false,
                ss17001id: '',
                url: {
                    list: "/api/ac/subsistence/ss17004Service/getPageList",
                    delete: "/api/ac/subsistence/ss17004Service/deleteData"
                },
                errorTitle: '保存错误',
                array: [],
                dataSs17004: {
                    id: "",
                    ssbb0001: "",
                    ssbb0003: "",
                    ssbb0004: null,
                    ssbb0005: "",
                    ssbb0007: "",
                    // daterange: [],
                },
                expenditure_arr: [],
                expenditure_type: [],
            }
        },
        methods: {
            prevStep() {
                this.$emit('prevStep')
            },
            nextStep() {
                let that = this;
                this.$emit('nextStep')
            },
            handleCreate() {
                this.$refs['dataSs17004'].resetFields();
                let that = this;
                that.title = "基础支出录入";
                that.disableSubmit = false;
                that.modalSs17004 = true;
                that.dataSs17004 = new Object();
                that.dataSs17004.ssbb0004 = null;
            },
            handleEdit(row) {
                this.$refs['dataSs17004'].resetFields();
                let that = this;
                that.title = "支出信息编辑";
                that.disableSubmit = false;
                let record = row;
                if (record.id) {
                    that.modalSs17004 = true;
                    that.dataSs17004 = Object.assign({}, record);
                    // that.dataSs17004.daterange = new Array();
                    // that.dataSs17004.daterange.push(new Date(record.ssbb0005));
                    // that.dataSs17004.daterange.push(new Date(record.ssbb0007));
                } else {
                    that.modalSs17004 = false
                }
            },
            handleDetail(row) {
                let that = this;
                that.title = "详情";
                that.disableSubmit = true;
                let record = row;
                if (record.id) {
                    that.modalSs17004 = true;
                    that.dataSs17004 = Object.assign({}, record);
                    // that.dataSs17004.daterange = new Array();
                    // that.dataSs17004.daterange.push(new Date(record.ssbb0005));
                    // that.dataSs17004.daterange.push(new Date(record.ssbb0007));
                } else {
                    that.modalSs17004 = false
                }
            },
            handleSubmit(name) {
                let that = this;
                that.LoadingModal = true;
                let validate = true;
                let err_msg = [];
                for (let item of that.fieldsToValidate) {
                    that.$refs[name].validateField(item, (error) => {
                        if (error) {
                            validate = false;
                            err_msg.push(error);
                        }
                    })
                }
                if (validate) {
                    let dataParam = {
                        id: that.dataSs17004.id,
                        ssbb0001: that.dataSs17004.ssbb0001,
                        ssbb0003: that.dataSs17004.ssbb0003,
                        ssbb0004: that.dataSs17004.ssbb0004,
                        // ssbb0005: DateFormat(that.dataSs17004.daterange[0], 'YYYY-MM-DD'),
                        // ssbb0007: DateFormat(that.dataSs17004.daterange[1], 'YYYY-MM-DD'),
                    }
                    let url = "/api/ac/subsistence/ss17004Service/createData";
                    if (that.dataSs17004.id) {
                        url = "/api/ac/subsistence/ss17004Service/updateData";
                    }
                    postAction(url, dataParam).then((res) => {
                        if (res.data.errcode != 0) {
                            this.$Message.error(res.data.errmsg);
                        } else {
                            this.modalSs17004 = false;
                            this.modalFormOk();
                        }
                    }).finally(() => {
                        that.Loading = false;
                        that.LoadingModal = false;
                    });

                } else {
                    that.LoadingModal = false;
                    that.$Message.error(err_msg[0]);
                    return;
                }
            },

            reloadData() {
                let that = this;
                that.queryParam.ssbb0001 = that.ss17001id;
                that.loadData();
            },
            checkNegative(value) {
                let that = this;
                if (value < 0) {
                    value = null;
                    this.$Message.error("不能为负数");
                }
            }
        },
        mounted() {
        },
    }
</script>
<style scoped>
    /deep/ .ivu-form-item-error-tip {
        display: none;
    }

    /*.ivu-form-item {*/
    /*    margin-bottom: 0px;*/
    /*}*/

    .itemStyle {
        width: 180px
    }

    .head-img1 {
        height: 200px;
        width: 250px;
        margin-top: 15px;
    }

    .head-img {
        height: 200px;
        width: 250px;
    }

    .imgBackColor {
        background-color: WhiteSmoke;
        height: 250px;
    }

    .positiveTDiv {
        height: 240px;
        width: 75px;
        line-height: 240px;
        background-color: #7CCD7C;
        margin-bottom: 10px;
        color: white;
        font-size: 14px;
        font-weight: 700;
    }
</style>
